<template>
  <div id="cart">
    <!-- 导航栏 -->
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{cartLength}})</div>
    </nav-bar>

    <!-- 商品的列表 -->
    <cart-list></cart-list>

    <!-- 底部结算 -->
    <cart-button-bar></cart-button-bar>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import CartList from './childComps/CartList.vue'
import CartButtonBar from './childComps/CartButtonBar.vue'

import {mapGetters} from 'vuex' //辅助函数，直接拿到getters中的方法


export default {
  name: 'Shopcart',
  components: { NavBar, CartList, CartButtonBar},
  computed: {
    ...mapGetters(['cartLength'])
    // 也可以命名法，用对象
    // ...mapGetters({
    //   length: 'cartLength'
    // })
  }
}
</script>

<style scoped>
  #cart {
      /* padding-top: 44px; */
      height: 100vh;
  }

  .nav-bar {
    background-color: var(--color-tint);
    color: white;
  }
</style>
